<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>导航</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">
        .nav a:after, .nav img, .nav span {vertical-align: middle;}
        nav {background-color: #404040;color: #fff;}
        img{max-width: 100%;vertical-align: middle;}
        img.tit_nav{margin-top: 6px;}
        .nav {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            color: #ccc;
            overflow-x: hidden;
            overflow-y: scroll;
            z-index: 10;
        }
        .nav dl {
            width: 50%;
            margin-left: 50%;
            background-color: #000;
        }
        .nav dt {
            padding: 20px 0 0 10px;
            color: #fff;
            font-size: 18px;
            font-weight: 700;
        }
        .nav dt.tit {background-color: #007dbd;font-weight: 400;padding: 10px}
        .nav dd {padding-left: 15px;}
        .nav a {display: block;padding: 5px;}
        .nav a:after {
            content: '▶';
            float: right;
            font-size: 12px;
            margin-top: 6px;
        }
    </style>
</head>
<body>
    <div class="nav none">
        <dl class="nav">
            <dt class="tit">
                导航<span class="f12">MENU</span>
                <img src="./img/54.gif" width="15" class="fr tit_nav" onclick="openNav(false)">
            </dt>
            <dt>专业</dt>
            <dd>
                <a href=""><span>Web网页设计</span></a>
                <a href=""><span>WEB前端开发</span></a>
                <a href=""><span>Python</span></a>
                <a href=""><span>PHP</span></a>
                <a href=""><span>CPDA</span></a>
            </dd>
            <dt>更多</dt>
            <dd>
                <a href="">
                    <img src="./img/35.gif" width="46">
                    <span>官网首页</span>
                </a>
                <a href="">
                    <img src="./img/36.gif" width="46">
                    <span>设计艺术学院</span>
                </a>
                <a href="">
                    <img src="./img/37.gif" width="46">
                    <span>管理学院</span>
                </a>
                <a href="">
                    <img src="./img/38.gif" width="46">
                    <span>继续教育学院</span>
                </a>
            </dd>
        </dl>
    </div>

    <nav class="clear p10">
        <img src="./img/menu-ico.gif" width="18" class="fr" onclick="openNav(true)">
    </nav>

    <script type="text/javascript">
        // querySelector()方法仅仅返回匹配指定选择器的第一个元素
        // 返回所有的元素，querySelectorAll()
        var nav = document.querySelector('.nav');
        window.openNav = function (bool) {
            nav.className = bool ? 'nav' : 'nav none'
        }
    </script>


</body>
</html>